<template>
	<view :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title=" " :isAppBtn="false"></HeadCustom>
		<view class="userName fboxCol">
			<view class="btn_box"><view class="btn" @tap="skipPage">跳过</view></view>
			<view class="userDetail fboxCol Xcenter Ycenter flex1">
				<text class="text_big font38">您的性别？</text>
				<text class="text_min font26">本无依据性别设计偏好内容</text>
				<view class="sexSelect fboxRow">
					<view v-for="(item, index) in genderObj" :key="index" @tap="selectGender(item, index)" :style="{ marginRight: index == 0 ? '80rpx' : 0 }">
						<image :src="item.url" mode="aspectFill"></image>
						<text :class="{ select_color: item.select }">{{ item.gender }}</text>
					</view>
				</view>
				<text class="text_big font38">您的出生年月？</text>
				<text class="text_min font26">请填写您的真实出生年月</text>
				<view class="select_rq" @tap="opendateTime">
					<text class="font38">{{ user.birthday }}</text>
				</view>
				<text class="text_big font38">所在城市</text>
				<text class="text_min font26">默认定位城市，点击选择其他城市</text>
				<view class="select_rq" @tap="openArea">
					<text class="font-ell1">{{ user.areaProvinceName ? user.areaProvinceName + '-' + user.areaCityName + '-' + user.areaDistrictName : '' }}</text>
				</view>
				<u-datetime-picker
					:closeOnClickOverlay="true"
					@close="datetimeShow = false"
					@cancel="datetimeShow = false"
					:minDate="631123200"
					v-model="datetime"
					title="出生日期选择"
					confirmColor="#ACB4C7"
					cancelColor="#ACB4C7"
					:show="datetimeShow"
					mode="date"
					@confirm="confirmDate"
				></u-datetime-picker>

				<u-picker
					@cancel="areaShow = false"
					@close="areaShow = false"
					:show="areaShow"
					:closeOnClickOverlay="true"
					ref="uPicker"
					confirmColor="#ACB4C7"
					cancelColor="#ACB4C7"
					title="城市选择"
					:defaultIndex=defaultIndex
					keyName="areaName"
					@confirm="confirmArea"
					@change="changeHandler"
				></u-picker>
			</view>
			<BottomBtn :title="tabbarBtnTitle" @btnClick="goNextPage"></BottomBtn>
		</view>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { completeInformation } from '@/api/mine.js';
import { universalArea, currentMember } from '@/api/recruit.js';
import { debounce } from '@/static/js/common.js';
export default {
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
			tabbarBtnTitle: '完成',
			datetimeShow: false,
			datetime: '2000-01-01',
			areaShow: false,
			genderObj: [
				{ gender: '男', url: 'https://ebc-prod.cdn.benwunet.com/uni-static/h5/sexman.png', value: 1, select: false },
				{ gender: '女', url: 'https://ebc-prod.cdn.benwunet.com/uni-static/h5/sexwoman.png', value: 2, select: false }
			],
			columns: [],
			defaultIndex:[0,0,0],
			user: {
				birthday: '',
				gender: '', // 1-男  0-女
				areaProvinceName: '',
				areaCityName: '',
				areaDistrictName: ''
			}
		};
	},
	onLoad(option) {
		// 获取当前时间十五年前
		let date = new Date()
		let y = date.getFullYear()-15
		let m = date.getMonth()+1
		let d = date.getDate()
		const nowTime = `${y}-${m}-${d}`
		this.datetime = this.formatterDate(new Date(nowTime).getTime())
		this.user.birthday = this.formatterDate(new Date(nowTime).getTime());
		this.user.avatar = option.avatar;
		this.user.realName = option.realName;
	},
	methods: {
		//确定地区
		confirmArea(data) {
			this.areaShow = false;
			// 省
			this.user.areaProvinceId = data.value[0].areaCode;
			this.user.areaProvinceName = data.value[0].areaName;
			//市
			this.user.areaCityId = data.value[1].areaCode;
			this.user.areaCityName = data.value[1].areaName;
			// 区
			this.user.areaDistrictId = data.value[2].areaCode;
			this.user.areaDistrictName = data.value[2].areaName;
		},
		// 跳过
		skipPage: debounce(function() {
			completeInformation({}).then(res => {
				this.$pageTo('/index/index');
			});
		}, 1000),
		openArea() {
			this.areaShow = true;
			this.getUniversalArea(this.user.areaProvinceId);
		},
		// 改变地区
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				indexs,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			this.defaultIndex = indexs
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				this.getUniversalArea(value[0].areaCode, 1);
			} else if (columnIndex === 1) {
				this.getUniversalArea(value[1].areaCode, 2);
			}
		},
		// 查询城市信息
		getUniversalArea(sup, level) {
			universalArea({ sup: sup }).then(res => {
				if (!sup) {
					this.$refs.uPicker.setColumnValues(0, res.data);
					this.getUniversalArea(res.data[0].areaCode, 1);
				} else if (level == 1) {
					this.$refs.uPicker.setColumnValues(1, res.data);
					this.getUniversalArea(res.data[0].areaCode, 2);
				} else if (level == 2) {
					this.$refs.uPicker.setColumnValues(2, res.data);
				}
			});
		},
		// 选择性别
		selectGender(data, key) {
			this.genderObj.forEach(x => {
				x.select = false;
			});
			this.genderObj[key].select = true;
			this.user.gender = this.genderObj[key].value;
		},
		// 完善信息 接口
		completeInformation: debounce(function() {
			completeInformation({ ...this.user }).then(res => {
				currentMember({}).then(res => {
					uni.setStorageSync('bw_user_temp', JSON.stringify(res.data));
					this.$pageTo('/index/index');
				});
			});
		}, 1000),
		// 完成
		goNextPage() {
			//
			this.completeInformation();
		},
		opendateTime() {
			this.datetimeShow = true;
		},
		// 确定出生日期
		confirmDate(data) {
			console.log(data.value);
			this.user.birthday = this.formatterDate(data.value);
			this.datetimeShow = false;
		},
		// 时间戳转换为年月日
		formatterDate(timeStamp) {
			const date = new Date(timeStamp); // 创建Date对象
			const year = date.getFullYear(); // 获取年份
			let month = date.getMonth() + 1;
			let day = '';
			if (month > 10) {
				month = month;
			} else {
				month = '0' + month;
			}
			if (date.getDate() > 10) {
				day = date.getDate();
			} else {
				day = '0' + date.getDate();
			}
			return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-input-input {
	color: #6b707c;
	font-size: 38rpx;
	font-weight: 400;
	text-align: center;
}
::v-deep .uni-picker-view-mask {
	background: none !important;
}
::v-deep .u-toolbar__title {
	color: #f7f9ff;
	font-size: 32rpx;
}
.select_color {
	color: #f7f9ff;
}
.userName {
	.btn_box {
		padding: 40rpx;
		.btn {
			background-color: #e8cda7;
			border-radius: 8rpx;
			padding: 13rpx 30rpx;
			float: right;
			color: var(--controllerBgColor);
		}
	}
	.userDetail {
		padding-top: 40rpx;
		.text_big {
			font-weight: 700;
			line-height: 56rpx;
			color: #e8cda7;
			margin-top: 80rpx;
		}
		.sexSelect {
			margin-top: 40rpx;
			> view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #6b707c;
				> image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-bottom: 10rpx;
				}
			}
		}
		.text_min {
			font-weight: 400;
			color: #6b707c;
			line-height: 38rpx;
			margin-top: 40rpx;
		}
		.select_rq {
			height: 60rpx;
			width: 330rpx;
			border-bottom: 1rpx solid #2d3341;
			text-align: center;
			margin: 40rpx 0;
			> text {
				font-weight: 400;
				color: #f7f9ff;
				line-height: 56rpx;
			}
		}
	}
}
</style>
